<template>
  <!-- 各模块头部tag菜单，可横向滚动 -->
  <div class="incomeTagMenuPage">
    <div
      v-for="(n, i) in state.showTagMenuArr"
      class="menuTag"
      :class="router.currentRoute.value.path == n.path ? 'active' : ''"
      :key="i"
      @click="clickTag(n)"
    >
      {{ n.name }}
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { routes } from "@/router";

const router = useRouter();
const props = defineProps({
  projectName: {
    // 此处传入的名称必须与 router 中定义的一级菜单 name 一致
    type: String,
    required: true,
    default: "",
  },
  menuName: {
    // 此处传入的名称必须与 router 中定义的二级菜单 name 一致
    type: String,
    required: true,
    default: "",
  },
});

const state = reactive({
  flag: true,
  showTagMenuArr: [],
});

// 初始化
const initTag = (pjName, menuName) => {
  // 由路由配置文件过滤出需要展示的tag标签
  routes.map((n, i) => {
    if (n.name === "Home") {
      n.children.map((m, j) => {
        if (m.name === pjName) {
          // 资产经营管理
          if (m.children.length) {
            m.children.map((o, k) => {
              if (o.name === menuName) {
                let arr = o.children;
                state.showTagMenuArr = arr.filter((item, index) => {
                  return !item.meta.skip;
                });
              }
            });
          }
        }
      });
    }
  });
};
// 监听参数变化来更新tag
watch(
  () => props.menuName,
  (newVal, oldVal) => {
    initTag( props.projectName, newVal);
  },
  { immediate: true }
);

const clickTag = (item) => {
  state.flag = !state.flag;
  router.push(item.path);
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.incomeTagMenuPage {
  margin-bottom: 38px;
  .menuTag {
    display: inline-block;
    width: 136px;
    height: 44px;
    line-height: 42px;
    text-align: center;
    background: #fff;
    color: #4d4d4d;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    margin-right: 42px;
    border-radius: 6px;
    border: 1px solid #999999;
    cursor: pointer;
  }
  .active {
    color: #fff;
    background: $btn-primary-bg-color;
    border: 1px solid $btn-primary-bg-color;
  }
}
</style>
